import React, {useState} from 'react';
import {StyleSheet, Text, View, StatusBar, Animated} from 'react-native';
import Video from 'react-native-video';
import Avatar from './avatar';
import Heart from './heart';
import IconText from './IconText';
import RotateAvatar from './rotateAvatar';
import IconButton from './IconButton';

function Comment() {
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 10,
        paddingRight: 10,
        margin: 10,
      }}>
      <Avatar uri="https://i02piccdn.sogoucdn.com/653cc050e0608363" />
      <View
        style={{
          paddingLeft: 10,
          paddingRight: 10,
          flex: 1,
        }}>
        <Text style={{color: '#fff', fontWeight: 'bold'}}>黑猫</Text>
        <Text style={{color: '#fff'}}>1231231231231231231</Text>
      </View>
      <Heart num="10" />
    </View>
  );
}

const videoPlay = () => {
  const [height] = useState(new Animated.Value(0));
  return (
    <View style={{flex: 1}}>
      <StatusBar
        translucent={true}
        backgroundColor="rgba(0,0,0,0)"
        barStyle="light-content"
      />
      <Video
        paused={true}
        resizeMode="cover"
        style={styles.video}
        source={{uri: 'http://player.alicdn.com/video/aliyunmedia.mp4'}}
        poster="https://img2.woyaogexing.com/2020/04/30/7638c48f1bf1446dbeec18affd7e54b9!1080x1920.png"
        posterResizeMode="cover"
        controls={false}
      />
      <View style={styles.btns}>
        <View style={styles.btnsItem}>
          <Avatar uri="https://i02piccdn.sogoucdn.com/653cc050e0608363" />
        </View>
        <View style={styles.btnsItem}>
          <Heart num="66.9w" />
        </View>
        <View style={styles.btnsItem}>
          <IconText
            num="2333"
            name="comment"
            size={20}
            onPress={() => {
              Animated.timing(height, {
                toValue: 1,
                duration: 200,
                useNativeDriver: false,
              }).start();
            }}
          />
        </View>
        <View style={styles.btnsItem}>
          <IconText num="2333" name="share" size={20} />
        </View>
        <View style={styles.btnsItem}>
          <RotateAvatar uri="https://i02piccdn.sogoucdn.com/653cc050e0608363" />
        </View>
      </View>
      <Animated.View
        style={{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          height: height.interpolate({
            inputRange: [0, 1],
            outputRange: ['0%', '85%'],
          }),
          backgroundColor: 'rgba(0,0,0,0.8)',
          borderTopLeftRadius: 15,
          borderTopRightRadius: 15,
          zIndex: 1000,
        }}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            padding: 10,
          }}>
          <Text style={{color: '#fff', flex: 1, textAlign: 'center'}}>
            565条评论
          </Text>
          <IconButton
            name="close"
            color="#fff"
            onPress={() => {
              Animated.timing(height, {
                toValue: 0,
                duration: 200,
                useNativeDriver: false,
              }).start();
            }}
          />
        </View>
        {[0, 1, 2, 3, 4, 5, 6, 7].map((v) => {
          return <Comment key={v} />;
        })}
      </Animated.View>
    </View>
  );
};

export default videoPlay;

const styles = StyleSheet.create({
  video: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  btns: {
    position: 'absolute',
    right: 10,
    bottom: 10,
  },
  btnsItem: {
    marginTop: 10,
  },
});
